<template>
  <div>
    <van-sticky>
      <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      />
      <div
        @click="sort"
        class="sort"
        style="text-align: left; padding: 10px 0px 10px 16px; background: #fff"
      >
        价格排序
      </div>
    </van-sticky>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      style="padding-bottom: 50px"
    >
      <van-cell
        v-for="item in list"
        :key="item.goods_id"
        style="text-align: left"
        @click="gotoDetail(item.goods_id)"
      >
        <template #icon>
          <van-image
            width="80px"
            height="80px"
            :src="item.goods_small_logo"
            style="margin-right: 20px"
          />
          <div style="flex: 1">
            <span style="font-size: 20px; color: red; margin-right: 10px"
              >￥{{ item.goods_price }}</span
            >{{ item.goods_name }}
          </div>
        </template>
      </van-cell>
    </van-list>
    <div class="backTop" @click="goTop" v-show="isShow">
      <van-icon name="back-top" style="line-height: 30px; font-weight: 700px" />
    </div>
  </div>
</template>
<script>
export default {
  name: "more",
  data() {
    return {
      title: "",
      list: [],
      loading: false,
      finished: false,
      page: 1,
      type: "",
      isShow: false,
      flag: true,
    };
  },
  created() {
    const { type } = this.$route.params;
    this.type = type;
    this.title = type == "hotsale" ? "热销商品" : "品牌商品";
    this.getData(type);
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    sort() {
      if (this.flag) {
        this.flag = false;
        this.list.sort(function (a, b) {
          return a["goods_price"] - b["goods_price"];
        });
      } else {
        this.flag = true;
        this.list.sort(function (a, b) {
          return b["goods_price"] - a["goods_price"];
        });
      }
    },
    onLoad() {
      if (!this.finished) {
        this.page++;
        this.getData(this.type);
      }
    },
    async getData(type) {
      this.loading = true;
      this.finished = false;
      const { data } = await this.$request.get(type, {
        params: {
          limit: 10,
          page: this.page,
        },
      });
      this.list.push(...data.data);

      this.loading = false;
      if (this.list.length >= data.total) {
        this.finished = true;
      }
    },
    gotoDetail(id) {
      this.$router.push("/goods/" + id);
    },
    goTop() {
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 300) {
        this.isShow = true;
      } else if (scrollTop < 300) {
        this.isShow = false;
      }
    },
  },
};
</script>
<style scoped>
.backTop {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ccc;
  position: fixed;
  background: pink;
  right: 30px;
  bottom: 80px;
  z-index: 9999;
}
</style>